<template>
  <div>
    <tree-grid
      :items='data'
      :columns='columns'
      @on-row-click='rowClick'
      @on-selection-change='selectionClick'
      @on-sort-change='sortClick'
    ></tree-grid>
    <button class="button-block" @click="exportData">导入检查记录</button>
  </div>
</template>
<script>
  import TreeGrid from '../components/treeGrid/src/treeGrid.vue'
  export default {
    data () {
      return {
        columns: [{
          type: 'selection',
          width: '50'
        }, {
          title: '编码',
          key: 'code',
          sortable: true,
          width: '150'
        }, {
          title: '名称',
          key: 'name',
          type: 'normal',
          width: '150'
        }, {
          title: '状态',
          key: 'status',
          type: 'normal',
          width: '150'
        }, {
          title: '备注',
          key: 'remark',
          type: 'normal',
          width: '150'
        }, {
          title: '操作',
          type: 'action',
          actions: [{
            type: 'primary',
            text: '编辑'
          }, {
            type: 'error',
            text: '删除'
          }],
          width: '150'
        }],
        data: [{
          id: '1',
          code: '01',
          name: '测试数据1',
          status: '启用',
          remark: '测试数据测试数据',
          expanded: false,
          _checked: true
        }, {
          id: '2',
          code: '02',
          name: '测试数据2',
          status: '启用',
          expanded: true,
          remark: '测试数据测试数据',
          children: [{
            id: '0201',
            code: '0201',
            name: '测试数据01',
            status: '启用',
            remark: '测试数据测试数据',
            children: [{
              id: '020101',
              code: '020101',
              name: '测试数据07',
              status: '启用',
              remark: '测试数据测试数据'
            }, {
              id: '020102',
              code: '020102',
              name: '测试数据08',
              status: '启用',
              remark: '测试数据测试数据'
            }]
          }, {
            id: '02',
            code: '0202',
            name: '测试数据02',
            status: '启用',
            remark: '测试数据测试数据'
          }]
        }, {
          id: '3',
          code: '03',
          name: '测试数据3',
          status: '启用',
          expanded: true,
          remark: '测试数据测试数据'
        }, {
          id: '4',
          code: '04',
          name: '测试数据4',
          status: '启用',
          remark: '测试数据测试数据'
        }]
      }
    },
    components: {
      TreeGrid
    },
    methods: {
      exportData () {
        this.$import.open({
          ftlType: 'qualitySafe',
          stageId: 4,
          templateUrl: `http://clh.zz.pinming.net:9999/api/qualitySafety/downloadQualitySafety`,
          actionUrl: `http://clh.zz.pinming.net:9999/api/qualitySafety/exportQualitySafety`
        }).then(res => {
        })
      },
      rowClick (data, index, event) {
        console.log('当前行数据:' + data)
        console.log('点击行号:' + index)
        console.log('点击事件:' + event)
      },
      selectionClick (arr) {
        console.log('选中数据id数组:' + arr)
      },
      sortClick (key, type) {
        console.log('排序字段:' + key)
        console.log('排序规则:' + type)
      }
    }
  }
</script>
